<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      window.onload = function () {
        function loadImgesAsync(url) {
          const promise = new Promise(function (resolve, reject) {
            //异步处理：消耗时间的代码
            const image = new Image(); //创建image对象
            image.onload = function () {
              resolve(image);
            };
            image.onerror = function () {
              reject(new Error("could not load image at" + url));
            };
          });
          return promise;
        }
        const promise = loadImgesAsync("");
        promise.then(
          function (data) {
            //成功
            box.appendChild(data);
          },
          function (error) {
            // 失败
            box.innerHTML = "图片加载失败";
            console.log(error);
          }
        );
      };
    </script>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>
